<template>
  <div class="frss cart-product-item">
    <img class="circle-img" :src="circleImg">
    <img class="product-img" :src="productImg">
    <div class="fcss product-description">
      <h3 class="product-title">丹慕妮尔2018夏装新款女装通勤V领雪纺连衣裙花色显瘦A字裙</h3>
      <p class="product-para">3.03 春装新品 衣橱清单 领券立减 3.03 春装新品 衣橱清单 领券立减 </p>
      <div class="frsbc money-choose">
        <span class="money">￥999.00</span>
        <div class="picker frcc">
          <span class="jian">-</span>
          <span class="number">2</span>
          <span class="add">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['circleImg'],
  data () {
    return {
      productImg: require('@/common/image/home-single-product.png')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.cart-product-item
  padding .20rem
  border-top 1px solid $ceb
  background-color $cff
.circle-img
  align-self center
  margin-right .20rem
  width .40rem
  height .40rem
.product-img
  margin-right .30rem
  height 1.80rem
  width 1.80rem
.product-description
  flex-grow 1
.product-title
  margin-bottom .20rem
  line-height .32rem
  font-size .28rem
  color $c33
.product-para
  line-height .24rem
  font-size .22rem
  color $c99
.money-choose
  margin-top .10rem
  width 100%
.money
  color $coupon-color
  font-size .24rem
.picker
  line-height .48rem
  font-size .28rem
  border 1px solid $ceb
  color $c33
.jian,.add,.number
  text-align center
.jian,.add
  height .48rem
  width .48rem
.number
  height .48rem
  width .80rem
  border-right 1px solid $ceb
  border-left 1px solid $ceb
</style>
